<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
	xmlns="http://www.w3.org/2000/svg"
	xmlns:html="http://www.w3.org/1999/xhtml"
	xmlns:doc="livcos.org/ns/doc"
	xmlns:dg="livcos.org/ns/doc/diagram"
	xmlns:xlink="http://www.w3.org/1999/xlink"
	xmlns:xs="http://www.w3.org/2001/XMLSchema"
	xmlns:f="livcos.org/ns/xslt/function"
	exclude-result-prefixes="doc html dg f xs">

	<xsl:import href="style/document.xsl" />
	
	<xsl:variable name="ref" select="'/test.livcos.org/data/SvgTest1'"/>
	
  <xsl:template name="page_head_extensionn">
    <html:script type="text/javascript">
    	<![CDATA[

scriptSupport.addInit(function() {
  var t1 = Dom("circle_1");
  new E.DragSource(t1, t1.element);
  t1 = Dom("circle_2");
  new E.DragSource(t1, t1.element);
  t1 = Dom("g_1");
  new E.DragSource(t1, t1.element);
});

    	]]>
    </html:script>
  </xsl:template>
	
	<xsl:template match="*[@id = 'paragraph_1']">
		<svg version="1.1" id="Ebene_2" width="500" height="200">
			<defs>
				<marker id="arrow_1" viewBox="0 0 16 10" refX="0" refY="5" markerUnits="strokeWidth" markerWidth="10"
					markerHeight="8" orient="auto">
					<path d="M 0 5 L 16 0 L 16 10 z"/>
				</marker>
				<marker id="arrow_2" viewBox="0 0 16 10" refX="16" refY="5" markerUnits="strokeWidth" markerWidth="10"
					markerHeight="8" orient="auto">
					<path d="M 0 0 L 16 5 L 0 10 z"/>
				</marker>
				<marker id="marker_3" viewBox="0 0 100 20" refX="50" refY="18" markerUnits="strokeWidth" markerWidth="100"
					markerHeight="10" orient="auto">
					<text x="50" y="1em" fill="blue" style="text-anchor:middle">Text</text>
				</marker>
			</defs>
			<g>
				<circle fill="#FFEE33" cx="200" cy="20" r="20"/>
				<circle fill="#dd0000" cx="110" cy="20" r="30"/>
				<circle fill="#009944" cx="100" cy="40" r="20"/>
				<circle fill="#005599" cx="40" cy="30" r="10"/>
				<text x="50" y="130" fill="red">Text</text>
				<rect fill="none" stroke="black" x="50" y="100" width="100" height="50"/>
				<polygon fill="yellow" stroke="black" stroke-width="1" points="49,72 57,97 100,50"/>
				<polyline fill="none" stroke="green" stroke-width="1" points="100,100 120,60 200,60 250,110"
					marker-start="url(#arrow_1)" marker-mid="url(#marker_3)" marker-end="url(#arrow_2)"/>
				<path d="M 100 150 L 120 180 L 220 180 L 240 160" fill="none" stroke="black" stroke-width="1"
					marker-start="url(#arrow_1)" marker-end="url(#arrow_2)"/>
				<g transform="translate(200,110)" fill="yellow">
					<rect stroke="black" x="0" y="0" width="100" height="50" rx="20" ry="10"/>
					<text x="10" y="30" fill="blue">A longer Text</text>
				</g>
				<g transform="translate(400,0) rotate(20)">
					<foreignObject width="500" height="100">
						<body xmlns="http://www.w3.org/1999/xhtml">
							<div style="width: 100px; height: 100px; overflow: auto;">
								This text is written inside a foreignObject tag in order to 
								take advantage of XHTML automatic word-wrapping.
							</div>
						</body>
					</foreignObject>
				</g>
			</g>
		</svg>
	</xsl:template>
	
	<xsl:template match="*[@id = 'paragraph_3']">
		<svg version="1.1" id="svg_1" width="800" height="200">
			<g>
				<xsl:apply-templates select="/*/doc:body/doc:chapter" mode="svg"/>
			</g>
		</svg>
	</xsl:template>
	
	<xsl:template match="doc:chapter" mode="svg">
		<g id="{@id}~1" transform="translate({((position() - 1) mod 3) * 300},{(position() - 1) idiv 3 * 100})"
			fill="#AAAAAA">
			<rect stroke="black" x="0" y="0" width="{string-length(doc:title) * 10 + 20}" height="50" rx="10" ry="10"/>
			<text x="10" y="30" fill="white">
				<xsl:value-of select="doc:title"/>
			</text>
		</g>
	</xsl:template>
	
</xsl:stylesheet>